<script>
  import $ from '../dfish.js'
  import {
    h
  } from 'vue'
  import WidgetBase from './WidgetBase.vue'
  import ButtonBar from './ButtonBar.vue'
  import Button from './Button.vue'
  import Menu from './Menu.vue'

  export default {
    name: 'w-pagebar',
    mixins: [ButtonBar],
    emits: ['click:item'],
    props: ['limit', 'size', 'offset', 'buttonCount', 'noFirstLast', 'face', 'jump'],
    data() {
      return {
        isJumpFocus: false,
        showDrop: false,
      }
    },
    methods: {
      x_default() {
        return {
          limit: 1,
          size: 0,
          offset: 0,
          buttonCount: 5,
          face: 'normal',
          gap: 0,
          valign: 'middle',
        }
      },
      inCurrent(a) {
        return this.currentPage == a.text
      },
      clickItem(e, i) {
        let b = (i - 1) * this.x.limit
        if (b != this.x.offset) {
          e.runType = 'click:item'
          this.trigger(e, b)
        }
      },
      clickDrop(e) {
        this.showDrop = true
      },
      onJumpClick(e) {
        let v = Math.max(0, $.number(this.$refs.jumpInput.value))
        this.clickItem(e, v)
      },
      html_button(i, t, ic, ds) {
        return h('button', {
          class: ['w-pagebar-button w-pagebar-num', {'z-on': !t && !ic && i == this.currentPage, 'z-ds': ds, [ic]: ic}],
          disabled: ds,
          onclick: e => this.clickItem(e, i)
        }, t || (ic ? '' : i))
      },
      html_slots() {
        return this.x.face === 'button' ? this.html_face_button() :
               this.x.face === 'simple' ? this.html_face_simple() : 
               this.html_face_normal()
      },
      html_buttons() {
        return [h(Button, {
          class: 'w-pagebar-button w-pagebar-prev',
          icon: '.f-i .f-i-angle-left',
          disabled: this.currentPage == 1,
          title: $.loc.page_text.prev,
          onclick: e => this.clickItem(e, this.currentPage - 1)
        }), h(Button, {
          class: 'w-pagebar-button w-pagebar-next',
          icon: '.f-i .f-i-angle-right',
          disabled: this.currentPage == this.sumPage,
          title: $.loc.page_text.next,
          onclick: e => this.clickItem(e, this.currentPage + 1)
        })]
      },
      html_drop() {
        let s = []
        if (this.x.buttonCount) {
          s.push(h(Button, {
            class: 'w-pagebar-button w-pagebar-button-count w-pagebar-prev',
            ref: 'drop',
            text: this.currentPage + '/' + this.sumPage,
            onclick: e => this.clickDrop(e)
          }))
        }
        if (this.showDrop) {
          let b = []
          for (let i = 1, sp = this.sumPage; i <= sp; i ++) b.push(h(Button, {text: i, on: {click: e => this.clickItem(e, i)}}))
          s.push(h(Menu, {snap: {target: () => this.$refs.drop, position: 'v', indent: 1}, on:{close: () => this.showDrop = false}}, {default: () => b}))
        }
        return s
      },
      html_face_simple() {
        return this.html_drop().concat(this.html_buttons())
      },
      html_face_button() {
        let b = this.html_buttons()
        b.splice(1, 0, ...this.html_drop())
        return b
      },
      html_face_normal() {
        const s = []
        let sp = this.sumPage
        let cp = this.currentPage
        let n = $.number(this.x.buttonCount)
        let f = Math.max(1, cp - Math.ceil(n / 2) + 1)
        let l = Math.min(sp + 1, f + n)
        let d = l - f < n ? Math.max(1, l - n) : f
        if (!this.x.noFirstLast) {
          s.push(this.html_button(1, this.labelFirst, this.iconFirst, cp == 1))
        }
        s.push(this.html_button(cp - 1, this.labelPrev, this.iconPrev, cp == 1))
        for (let i = d; i < l; i++) {
          s.push(this.html_button(i))
        }
        s.push(this.html_button(cp + 1, this.labelNext, this.iconNext, cp >= this.sumPage))
        if (!this.x.noFirstLast) {
          s.push(this.html_button(sp, this.labelLast, this.iconLast, cp >= this.sumPage))
        }
        if (this.x.jump) {
          s.push(h('span', {
            class: 'w-pagebar-jump-to'
          }, $.loc.to))
          s.push(h('input', {
            class: 'w-pagebar-jump-input',
            ref: 'jumpInput',
            onfocus: e => this.isJumpFocus = true,
            onblur: e => this.isJumpFocus = false,
            onkeydown: e => e.keyCode == 13 && this.onJumpClick(e)
          }))
          s.push(h('button', {
            class: 'w-pagebar-button w-pagebar-jump-button',
            onclick: this.onJumpClick
          }, 'GO'))
          s.push(h('span', {
            class: 'w-pagebar-jump-page'
          }, $.loc.page))
        }
        return s
      },
      html_face_mini() {
        return this.html_face_normal()
      },
    },
    computed: {
      currentPage() {
        return (Math.ceil(this.x.offset / this.x.limit) || 0) + 1
      },
      sumPage() {
        return Math.ceil(this.x.size / this.x.limit) || 1
      },
      labelFirst() {
        return this.x.face === 'normal' ? $.loc.page_text.first : ''
      },
      labelLast() {
        return this.x.face === 'normal' ? $.loc.page_text.last : ''
      },
      labelNext() {
        return this.x.face === 'normal' ? $.loc.page_text.next : ''
      },
      labelPrev() {
        return this.x.face === 'normal' ? $.loc.page_text.prev : ''
      },
      iconFirst() {
        return this.x.face === 'mini' ? 'f-i f-i-angle-first' : ''
      },
      iconLast() {
        return this.x.face === 'mini' ? 'f-i f-i-angle-last' : ''
      },
      iconNext() {
        return this.x.face === 'mini' ? 'f-i f-i-angle-right' : ''
      },
      iconPrev() {
        return this.x.face === 'mini' ? 'f-i f-i-angle-left' : ''
      },
      html_class() {
        return  [
            'w-buttonbar w-horizontal',
            'z-face-' + this.x.face,
            this.html_align_class,
            this.isJumpFocus && 'z-jump-on',
          ]
      }
    }
  }
</script>

<style>
  .w-pagebar {
    box-sizing: border-box;
  }

  .w-pagebar-num {
    display: flex;
    position: relative;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
  }

  .w-pagebar-num .w-button-text {
    padding: 0
  }

  .w-pagebar.z-face-normal .w-pagebar-num {
    min-width: 30px;
    padding: 0 10px;
    height: 32px;
    flex-shrink: 0;
    margin-right: -1px;
  }

  .w-pagebar.z-face-normal .w-pagebar-num:last-child,
  .w-pagebar.z-face-mini .w-pagebar-num:last-child{
    margin-right: 0;
  }

  .w-pagebar.z-face-normal .w-pagebar-num.z-on {
    font-weight: 700;
    background: var(--w--focus-color);
    border-color: var(--w--focus-color);
    color: #fff;
    z-index: 1;
    cursor: default;
  }

  .w-pagebar.z-face-normal .w-pagebar-num.z-hv {
    color: #3e89fa;
    border-color: var(--w--focus-color);
    z-index: 1;
  }

  .w-pagebar.z-face-normal .w-pagebar-num.z-on.z-hv {
    color: #fff;
  }
  
  .w-pagebar.z-face-mini .w-pagebar-num {
    min-width: 23px;
    padding: 0 3px;
    height: 23px;
    flex-shrink: 0;
    margin-right: 3px;
  }
  
  .w-pagebar.z-face-mini .f-i {
    color: #999;
    font-size: 14px;
  }

  .w-pagebar.z-face-mini .f-i.z-ds,
  .w-pagebar.z-face-mini .f-i.z-ds:hover {
    color: #ccc;
    background: #f9f9f9;
    border-color: #ddd;
  }

  .w-pagebar.z-face-mini .w-pagebar-num:hover {
    border-color: var(--w--focus-color);
    color: var(--w--focus-color);
  }
  
  .w-pagebar.z-face-mini .w-pagebar-num.z-on {
    background: var(--w--focus-color);
    border-color: var(--w--focus-color);
    color: #fff;
    cursor: default;
  }
  
    
  .w-pagebar.z-face-button .w-button {
    margin-right: -1px;
  }
  
  .w-pagebar.z-face-button .w-button:last-child {
    margin-right: 0;
  }
  
  .w-pagebar.z-face-button .w-button-main {
    padding: 0 6px;
  }
  
  .w-pagebar.z-face-button .w-pagebar-button-count {
    padding: 0 8px;
  }
  
  .w-pagebar.z-face-simple .w-button,
  .w-pagebar.z-face-simple .w-button.z-ds {
    background: transparent;
  }
  
  .w-pagebar.z-face-simple .w-button,
  .w-pagebar.z-face-simple .w-button-main {
    border: 0;
    padding: 3px;
  }

  .w-pagebar.z-face-simple .w-button .w-button-icon {
    color: #555;
  }
  
  .w-pagebar.z-face-simple .w-button.z-ds .w-button-icon {
    color: #bbb;
  }
  
  
  .w-pagebar-num.z-ds {
    color: #999;
    cursor: default;
    background-color: #fff;
  }

  .w-pagebar-jump-to {
    padding: 0 5px 0 10px;
  }

  .w-pagebar-jump-input {
    width: 30px;
    height: 32px;
    border: 1px solid #ddd;
    background-color: #fff;
    box-sizing: border-box;
    text-align: center;
  }

  .w-pagebar-jump-button {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #ddd;
    background-color: #fafafa;
    margin-left: -1px;
    color: #888;
    box-sizing: border-box;
  }

  .w-pagebar-jump-page {
    padding-left: 5px;
  }

  .w-pagebar.z-jump-on .w-pagebar-jump-input {
    border-color: var(--w--focus-color);
  }

  .w-pagebar.z-jump-on .w-pagebar-jump-button {
    border-color: var(--w--focus-color);;
    background-color: var(--w--focus-color);
    color: #fff;
  }
</style>
